<template>
  <div>
    <a-table
      size="middle"
      bordered
      row-key="id"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :loading="loading"
    >
      <template slot="nodeType" slot-scope="text, record">
        <a-radio-group v-model="record.nodeType" @change="handelChangeNodeType(record)">
          <a-radio :value="0">
            审批任务
          </a-radio>
          <a-radio :value="1">
            工作任务
          </a-radio>
        </a-radio-group>
      </template>
      <template slot="isShowAppendForm" slot-scope="text, record">
        <a-radio-group v-model="record.isShowAppendForm" @change="handelChangeShowAppendForm(record)">
          <a-radio :value="true">
            是
          </a-radio>
          <a-radio :value="false">
            否
          </a-radio>
        </a-radio-group>
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click="handleEditKFD(record)">节点表单设计</a>
     <!-- </template>
      <template slot="action" slot-scope="text">-->
        <a-divider type="vertical" />
        <a @click="doActScript(record)">节点脚本设计</a>
      </template>
    </a-table>
    <j-modal
      title="表单设计器"
      :fullscreen.sync="fullscreen"
      :visible.sync="isIframeLoaded"
      @cancel="handleCancleKDF"
      :destroyOnClose="true"
      :footer="null"
      :bodyStyle="{'padding':'0px'}"
    >
      <k-form-design ref="kfd" @save="handleSubmitKFD" :showHead="false"/>
    </j-modal>
    <act-script ref="actScript"></act-script>
  </div>

</template>
<script>
import { getNodeList, saveNode, getActKAppendForm, saveNodeForm } from '@/api/process'
import actScript from '@/views/process/components/processNodeActScript'
import { KFormDesign } from '@/components/k-form-design/index'
export default {
  name: 'processNode',
  components:{
    KFormDesign
  },
  props: {
    processData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '节点名称',
          align: 'center',
          dataIndex: 'nodeName'
        },
        {
          title: '节点编码',
          align: 'center',
          dataIndex: 'nodeId'
        },
        // {
        //   title: 'pc表单',
        //   align: 'center',
        //   dataIndex: 'appendFormId',
        //   customRender: (t, r, index) => {
        //     if (t) {
        //       return '已设计'
        //     } else {
        //       return '未设计'
        //     }
        //   }
        // },
        // {
        //   title: '移动表单',
        //   align: 'center',
        //   dataIndex: 'modelAndViewMobile'
        // },
        {
          title: '超时提醒',
          align: 'center',
          dataIndex: 'nodeTimeout'
        },
        {
          title: '节点任务类型',
          align: 'center',
          dataIndex: 'nodeType',
          scopedSlots: { customRender: 'nodeType' }
        },
        {
          title: '是否展示全部表单',
          align: 'center',
          dataIndex: 'isShowAppendForm',
          scopedSlots: { customRender: 'isShowAppendForm' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      dataSource: [],
      labelCol: { span: 5 },
      wrapperCol: { span: 19 },
      editModalVisible: false,
      isIframeLoaded: false,
      fullscreen: true,
      loading: false,
      nodeData: {}, // 选择流程节点数
      KDFJsonId: ''// 表单设计器id
    }
  },
  methods: {
    handleEdit(record) { // 编辑流程节点
      this.editModalVisible = true
      this.nodeData = record
    },

    doActScript(record) {
      console.log(record);
      this.$refs.actScript.show(record)
    },

    handleEditKFD(record) { // 编辑表单设计器
      this.nodeData = record
      getActKAppendForm({
        nodeId: record.nodeId,
        processDefinitionId: this.processData.processDefinitionId,
        modelId: this.processData.id
      }).then(res => {
        this.KDFJsonId = res.result ? res.result.id : null
        this.isIframeLoaded = true
        this.$nextTick(() => {
          res.result && this.$refs.kfd.handleSetData(JSON.parse(res.result.formJson))
        })
      })
    },
    handleSubmitKFD(data) { // 保存表单设计器
      saveNodeForm({
        formJson: data,
        modelId: this.processData.id,
        nodeId: this.nodeData.nodeId,
        processDefinitionId: this.processData.processDefinitionId,
        id: this.KDFJsonId
      }).then(res => {
        if (res.success) {
          this.isIframeLoaded = false
          this.loadData()
          this.$message.success('保存成功')
        } else {
          this.$message.success(res.message)
        }
      })
    },
    handleCancleKDF() {
      this.isIframeLoaded = false
    },
    handleCancleDbSync() { // 关闭
      this.editModalVisible = false
    },
    handleDbSync() { // 弹窗点击确定
      this.$refs['ruleForm'].validate(valid => {
        if (valid) {
          this.updateData()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    updateData(params) { // 保存提交数据
      saveNode(params).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.editModalVisible = false
          this.$emit('modalFormOk')
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // this.loading = false
      })
    },
    loadData() {
      getNodeList({ modelId: this.processData.id }).then(res => {
        this.dataSource = res.result
      })
    },
    handelChangeNodeType(record) {
      this.updateData(record)
    },
    handelChangeShowAppendForm(record) {
      console.log(record)
      this.updateData(record)
    }
  },
  mounted() {
    this.loadData()
  },
  components:{
    actScript
  }
}
</script>
